<template>
    <div class="login-container">
      <div class="login-box">
        <h3 style="text-align: center;">账号登入</h3>
        <el-form  :rules="rules" label-width="80px" style="margin-left: -15px;">
          <el-form-item prop="uid">
            <el-input v-model="email" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="password" placeholder="密码" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <p style="font-size: 10px;margin-top: -15px;margin-bottom: -15px;">*已阅读并同意 <a href="http://">平台用户协议</a> 和 <a href="http://">隐私政策</a>  </p>
          </el-form-item>

          <el-form-item>
            <el-button type="info" @click="login" class="subBotton">登录</el-button>
          </el-form-item>
          <el-form-item style="margin-left: 12%;">
            <p style="font-size: 13px;">还没有账号？ <router-link to="/register">立即注册</router-link> </p>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>

<script>
import { codeLogin } from '@/api/login'
// 导入你的 Vuex Store
// import store from '@/store'

export default {

  name: 'LoginIndex',
  data () {
    return {
      uid: '',
      email: '', // 邮箱
      password: '', // 密码
      userName: '',
      rules: {
        email: [
          { required: true, message: '请输入邮箱账号', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    // 登录
    async login () {
      console.log('发送登录请求')
      const res = await codeLogin(this.email, this.password)
      // res:{code: 1,data{email: "admin@126.com",id: 1,
      // token: "eyJhbGciOiJIUzI1NiJ9.eyJlbXBJZCI6MSwiZXhwIjoyNDE1MjA3MTY3fQ._z-hMN3qKONdWxfI36iqS0i9nuTrnE3FfH-oSYmWg6s",
      // userName: "wang"}}
      console.log(res.data)
      this.uid = res.data.id
      this.userName = res.data.userName
      if (res.code === 1) {
        // 将用户信息存入到vuex
        this.$store.commit('user/setUserInfo', res.data)
        // 跳转传参
        this.$router.push({
          path: '/',
          query: {
            email: this.email,
            password: this.password
          }
        })
        this.$message('登录成功')
      // console.log(this.$store.state.uer)
      } else {
        this.$message('登录失败！')
      }
    }
  }
}
</script>

  <style scoped>
  .login-container {
    display: flex;
    /* justify-content: center;
    align-items: center; */
    height: 100vh;
    background-image: url(../../assets/img/loginBG.png);
    background-size: cover;
  }

  .login-box {
    width: 350px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 70%;
    top: 40%;
    transform: translateX(-50%);
  }

  /* Adjust input and button width */
  .el-input,
  .subBotton {
    width: 240px;
  }
  </style>
